import BaseTrigger from "../BaseTrigger";
import MuscleCanvas from "./MuscleCanvas";
import { useRef } from "react";
import blocks from "@/utils/motions-data";
import { usePopup } from "@/store/popup";

type IProps = {
  main?: string[];
  minor?: string[];
  onConfirm: (mainPart: string[], minorPart: string[]) => void;
};
type RefCanvas = {
  getMain: () => string[];
  getMinor: () => string[];
};

export default function MusclePicker({
  main = [],
  minor = [],
  onConfirm,
}: IProps) {
  const ref = useRef<RefCanvas>();

  const { openPopup } = usePopup();

  const handleConfirm = () => {
    if (ref.current) {
      onConfirm(ref.current.getMain(), ref.current.getMinor());
    }
  };

  const defaultValue = main.length ? blocks.keyToPaths[main[0]]?.name : "(空)";
  return (
    <BaseTrigger
      label="训练肌群"
      value={defaultValue}
      onClick={() => {
        openPopup({
          getNode: (props) => (
            <MuscleCanvas ref={ref} main={main} minor={minor} />
          ),
          onConfirm: handleConfirm,
        });
      }}
    />
  );
}
